<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-row :gutter="10">
        <el-col :span="20">
          <div class="topice_title">{{topiceinfo.serialNum}}.
            【{{topiceinfo.questionType==0?'单选题':topiceinfo.questionType==1?'多选题':topiceinfo.questionType==2?'判断题':'未知题型'}}】<br />{{topiceinfo.questionTitle}}
          </div>
        </el-col>
      </el-row>
      <div v-if="topiceinfo.imgUrl !== null && topiceinfo.imgUrl !== '' ">
        <el-image :src='topiceinfo.imgUrl' style='width: 100%;height: 200px;'>
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
    </div>
    <!-- 单选题 -->
    <div v-if="topiceinfo.questionType==0" class="radio-father-flex">
      <el-radio-group v-model="radio" v-for="(item,index) in topiceinfo.options" :key="index" class="text item"
        @change="changeOption1">
        <el-radio :label="index" class="radio-item-line-height ehoice-line-height" border>
          {{String.fromCharCode(index+65)}}&nbsp;&nbsp;&nbsp;{{item}}
        </el-radio>
      </el-radio-group>
    </div>
    <!-- 多选题 -->
    <div v-if="topiceinfo.questionType==1">
      <el-checkbox-group v-model="checked" v-for="(item,index) in topiceinfo.options" :key="index" class="text item"
        @change="changeOption2">
        <el-checkbox :label="index" class="radio-item-line-height" border>
          {{String.fromCharCode(index+65)}}&nbsp;&nbsp;&nbsp;{{item}}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <!-- 判断题 -->
    <div v-if="topiceinfo.questionType==2">
      <el-radio-group v-model="radio" v-for="(item,index) in topiceinfo.options" :key="index" class="text item"
        @change="changeOption3">
        <el-radio :label="index" class="radio-item-line-height" border>
          {{item}}
        </el-radio>
      </el-radio-group>
    </div>
    </div>
  </el-card>
</template>

<script>
  export default {
    name: 'Topiccard',
    props: ['topiceinfo', 'topicindex'],
    data() {
      return {
        topicnum: this.topicindex,
        radio: '',
        checked: []
      }
    },
    methods: {
      changeOption1(label) {
        let positon = {
          'type': 0,
          'num': this.topicnum,
          'key': this.radio
        }
        this.$emit('returnkey', positon)
      },
      changeOption2(label) {
        this.checked.sort()
        let positon = {
          'type': 1,
          'num': this.topicnum,
          'key': this.checked
        }
        this.$emit('returnkey', positon)
      },
      changeOption3(label) {
        let positon = {
          'type': 3,
          'num': this.topicnum,
          'key': this.radio
        }
        this.$emit('returnkey', positon)
      }
    }
  }
</script>

<style>
  .el-radio-button__inner,
  .el-radio-group {
    display: flex;
  }

  .radio-father-flex {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .box-card {
    border-radius: 8px;
    margin: 8px 20px;
  }

  .text {
    display: flex;
    font-size: 14px;
    margin: 0px;
  }

  .radio-item-line-height {
    align-items: center;
    display: flex;
    /* text-align: left; */
    white-space: normal;
    word-break: break-all;
    margin-bottom: 10px;
  }
  .el-radio.is-bordered,.el-checkbox.is-bordered {
    min-height: 40px;
    height: auto;
  }

  .el-checkbox__label,.el-radio__label {
    line-height: 20px;
    /* display: flex; */
  }

  .el-radio__input,
  .el-checkbox__input {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-checkbox__input {}

  .topice_title {
    line-height: 25px;
    min-width: 85vw;
    max-width: 90vw;
    text-align: left;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .el-radio.is-bordered,
  .el-checkbox.is-bordered {
    width: 100%;
    padding: 0 5px;
    border-radius: 6px;
    box-shadow: 0 0 5px #e1dddd;
  }

  .el-radio.is-bordered.is-checked,
  .el-checkbox.is-bordered.is-checked {
    background-color: rgba(26, 113, 235, 0.2);
  }
</style>
